<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul,input{margin: 0; padding:0;list-style: none;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oTxt = document.getElementById('txt1');
		var oBtn = document.getElementById('btn1');
		var oUl = document.getElementById('ul1');
		var n = 3;	//此处可以设置最大留言数量

		oBtn.onclick = function (){
			var oLi = document.createElement('li');
			oLi.innerHTML = oTxt.value;

			if (oUl.children[0]) {
				oUl.insertBefore(oLi, oUl.children[0]);
			} else{
				oUl.appendChild(oLi);
			};

			if(oUl.children[n]){
				oUl.removeChild(oUl.children[n]);
			}

			oTxt.value = '';
		}
	}
	</script>
</head>
<body>
	<input id="txt1" type="text" />
	<input id="btn1" type="button" value="发送" />
	<ul id="ul1"></ul>
</body>
</html>